<template>
  <div class="channel-edit">
    <van-cell title="我的频道" :border="false">
      <van-button
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
      >
        {{!isEdit ? '编辑' : '完成'}}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <!-- 4. 循环 遍历 数据 展示出来我的频道 -->
      <!-- 1. 注册事件 -->
      <van-grid-item
        class="channel-item"
        v-for="(value, index) in channels"
        :key="value.id"
        @click="channelsTwoFn(value, index)"
      >
        <!-- 1. 想要操作 text的颜色 必须得弄成标签 才能增加类名 -->
        <!-- 2. 有没有插槽 能显示 text操作 -->
        <!-- 3. 怎么来动态增加 类名 动态绑定class -->
        <!-- 4. 到底什么时候为true高亮， 什么时候 不高亮 -->
        <!-- 5. 父组件传递过来一个值 ，只让那个传过来的值 高亮 -->
        <template v-slot:text>
          <span v-bind:class="{'active': active === index}">{{value.name}}</span>
        </template>
        <template v-slot:icon>
          <van-icon v-show="isEdit && !fixedChannels.includes(index)" name="close" />
        </template>
      </van-grid-item>

    </van-grid>

    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="value in recommendChannels"
        :key="value.id"
        :text="value.name"
        icon="plus"
        @click="addChannels(value)"
      />
    </van-grid>
  </div>
</template>

<script>
// 2. 导入删除请求方法
import { getAllChannels, setChannels, deleteUserChannel } from '@/api/channel'
import {mapState} from 'vuex'
import {setLocal} from '@/utils/storage'

export default {
  name: 'test-box',
  props: ['channels', 'active'],
  data() {
    return {
      allChannels: [],
      isEdit: false,
      fixedChannels: [0]
    }
  },
  created() {
    // 3. 页面已加载 我们就调用函数 发请求
    this.getAllChannelsFn()
  },
  computed: {
    recommendChannels() {
      // allchannels 是所有的频道
      // 我们只需要过滤 所有频道

      // 将 我的频道 的数据 都过滤出去就可以了

      let arr = this.allChannels.filter(item => {
        //  当 我的频道 不包含 这次循环的 item 则 需要为 true
        let flag = this.channels.some(item2 => {
          return item2.id === item.id
        })

        return !flag
      })

      return arr
    },
    ...mapState(['user'])
  },
  methods: {
    async getAllChannelsFn() {
      // 4. 发请求
      const {data: {data: {channels}}} = await getAllChannels()

      this.allChannels = channels
    },
    async addChannels(item) {
      // // 1. 方式一 访问 vuex数据
      // console.log( this.$store.state.user )

      // // 2. 方式二
      // console.log(this.user)

      if(this.user.token) {
        // 1. 登录 发请求
        const res = await setChannels({
          id: item.id,
          seq: this.channels.length
        })

        console.log(res)
      } else {
        // 2. 没登陆 本地存储 操作
        setLocal('channels', this.channels)
      }

      // js 数据的操作
      this.channels.push(item)
    },
    channelsTwoFn(item, index) {
      // 2. 有两件事 需要做
      if(this.isEdit) {
        // 3. 做一个判断 点击的 如果是 推荐 则 什么都不做 直接退出函数
        if(index === 0) {
          return false
        }

        // isEdit是 true 代表我展示着 ❌， 那么我就要执行删除
        // 2. 做一个判断 电机的是 active之前的
        if(index <= this.active) {
          this.$emit('changeActive', this.active - 1, true)
        }

        // 1. 完成 删除操作
        this.channels.splice(index, 1)

        // 3. 封装删除方法
        this.deleteChannels(item, index)
      } else {
        // isEdit是 false 代表 我没展示❌， 那么我就要执行切换
        // 将 点击的 频道的 索引 赋值给 父组件的 active就可以了
        // 3. 子组件给父组件传值
        this.$emit('changeActive', index, false)

      }
    },
    async deleteChannels(item, index) {
      // 3. 完成真的删除
      if(this.user.token) {
        // 3.1 如果登录删除远程 发请求
        const res = await deleteUserChannel(item.id)

        console.log(res)
      } else {
        console.log(11, this.channels)
        // 3.2 没登录 删除本地存储
        setLocal('channels', this.channels)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding-top: 50px;
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text {
        color: #222;
        font-size: 22px;
      }
    }

    /deep/ .van-icon-close {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 36px;
      color: #ccc;
    }

    .active {
      color: red;
    }
  }

  /deep/ .van-grid-item__icon-wrapper {
    position: unset;
  }

  /deep/ .recommend-grid {
    .van-grid-item__content {
      flex-direction: row;
      color: #222;
      .van-icon {
          font-size: 24px;
      }

      .van-grid-item__text {
          font-size: 22px;
          margin-top: 0;
      }
    }
  }
}
</style>
